import React from "react";
import {Image, ScrollView, Text, View,TouchableOpacity} from "react-native";
import Loading from '../publi/loading'
import { Rating} from 'react-native-elements';
import { Card, WhiteSpace, WingBlank } from '@ant-design/react-native';
export default  class Dyxq extends React.Component {


    static navigationOptions =  ({ navigation }) =>({
        title: navigation.state.params.title,
    });

    constructor(props) {
        super(props);   //这一句不能省略，照抄即可
        this.state = {
            moviesXq:null,  //这里放你自己定义的state变量及初始值
            id:'',
            duanp:null,
            changping:null,
            loading:true

        };
    }

    async componentDidMount()
    {
        let id = this.props.navigation.state.params.id;
        this.setState({
            id,
            moviesXq:await this.fetchData(id),
            duanp:await this.dpData(id),
            changping:await this.cpData(id),
            loading:false

        });


    }

    fetchData(id)
    {
        return new Promise((resolve, reject) => {
            fetch(`https://api.douban.com/v2/movie/${id}?apikey=0b2bdeda43b5688921839c8ecb20399b`, {
                method: 'GET'
            })
                .then((response) => response.json())
                .then((responseData) => {
                    resolve(responseData)
                })
                .catch((error) => {
                    callback(error);
                });

        })

    }
    fetchData(id)
    {
        return new Promise((resolve, reject) => {
            fetch(`https://api.douban.com/v2/movie/${id}?apikey=0b2bdeda43b5688921839c8ecb20399b`, {
                method: 'GET'
            })
                .then((response) => response.json())
                .then((responseData) => {
                    resolve(responseData)

                })
                .catch((error) => {
                    callback(error);
                });

        })

    }
    dpData(id)
    {
        return new Promise((resolve, reject) => {
            fetch(`https://api.douban.com/v2/movie/subject/${id}/comments?start=1&count=100&apikey=0df993c66c0c636e29ecbb5344252a4a&start=1&count=10`, {
                method: 'GET'
            })
                .then((response) => response.json())
                .then((responseData) => {
                    resolve(responseData)

                })
                .catch((error) => {
                    callback(error);
                });

        })

    }
    cpData(id)
    {
        return new Promise((resolve, reject) => {
            fetch(`https://api.douban.com/v2/movie/subject/${id}/reviews?apikey=0b2bdeda43b5688921839c8ecb20399b&start=1&count=5`, {
                method: 'GET'
            })
                .then((response) => response.json())
                .then((responseData) => {
                    resolve(responseData)

                })
                .catch((error) => {
                    callback(error);
                });

        })

    }

    render() {
        const {navigate} = this.props.navigation;

        if(this.state.loading){
            return <Loading/>
        }else {
            let moviesXq = this.state.moviesXq
            let changp = this.state.changping.reviews

            return (
                <ScrollView
                    style={{ backgroundColor: '#f5f5f9'}}
                    automaticallyAdjustContentInsets={false}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}
                >
                    <Image source={{uri: moviesXq.image}}
                           style={{height:350,resizeMode:'contain'}}/>
                <View style={{paddingLeft: 10, paddingRight: 10, paddingTop: 10,}} >
                    <View style={{ paddingLeft: 0, paddingRight: 4, paddingTop: 4,paddingBottom:4,}}>
                        <View ><Text style={{color:'#000',fontSize: 16}}>{moviesXq.alt_title}</Text></View>
                        <View style={{flex: 1, flexDirection: 'row',paddingTop: 4 }}>
                            <Rating
                                imageSize={20}
                                readonly
                                startingValue={ (Number(moviesXq.rating.average)/10) * 5 }
                            /><Text style={{color:'#000',paddingLeft: 10,fontSize: 16}}>{moviesXq.rating.average}分</Text>
                        </View>
                        <View ><Text style={{color:'#8d8d8d'}}>上映时间：{moviesXq.attrs.pubdate[0]}</Text></View>
                        <View  style={{ paddingBottom:35,}}><Text style={{color:'#8d8d8d'}}>简介：{moviesXq.summary}</Text></View>
                 </View>
                </View>


              <WingBlank size="lg">
                        <Text style={{color:'#000',fontSize:16}}>评论</Text>
                        { changp.map((item,index)=>{
                            return (
                                <TouchableOpacity     onPress={() =>
                                    navigate('Plxq', {
                                        obj:item
                                    })


                                }
                                          key={index}
                                >
                                <Card    style= {{marginTop:8,marginBottom : 8}}


                            >
                                <Card.Header

                                    title={<Text style={{color:'#000' }}>{item.author.name}</Text>}
                                    thumbStyle={{ width: 30, height: 30 }}
                                    thumb={item.author.avatar}
                                    extra={<Rating
                                        imageSize={16}
                                        readonly
                                        startingValue={Number(item.rating.value)}
                                    />}
                                />
                                <Card.Body>
                                    <View >
                                        <Text style={{ marginLeft: 16,color:'#000' }}>{item.title}</Text>
                                        <View style={{flex: 1, flexDirection: 'row',paddingTop: 4 ,height:15}}>

                                        </View>
                                        <Text style={{ marginLeft: 16 }}>{item.summary}</Text>
                                    </View>
                                </Card.Body>
                                <Card.Footer
                                    content={item.created_at}
                                />
                            </Card>
                                </TouchableOpacity>)
                        })}
                    </WingBlank>

                </ScrollView>
            );
        }

    }


}
